﻿@{
    ViewBag.Title = "Dialog";
}
<h2>
    Dialog</h2>
<div id="btn1" class="btn_normal">
    Message</div>
<div id="btn2" class="btn_normal">
    Confirm</div>
<div id="btn3" class="btn_normal">
    Dialog</div>
<div id="btn4" class="btn_normal">
    Window</div>
<div id="dForm" style="display: none">
    <ul style="font-size: 16px; color: Blue; font-weight: bold; clip: rect(auto, auto, auto, 10px);
        letter-spacing: 1px; margin-top: 2px; list-style-type: none;">
        <li>对话框可以用来分层展示简单的操作界面。</li>
        <li>可以通过设置ShowMask属性(true/false)来决定是否显示蒙板。</li>
        <li>可以通过设置Draggable属性(true/false)来决定是否能够移动对话框。</li>
        <li>为了达到弹出层的效果，当前界面在页面初始化时必须设置为不可见。</li>
    </ul>
</div>
<script>
    $(function () {
        $("#btn1").click(function () {
            vDialog.MessageText = "普通消息提示。";
            vDialog.show();
        });

        $("#btn2").click(function () {
            vDialog2.MessageText = "真的要执行当前操作吗？确认请点击【确定】按钮，否则请点击【关闭】按钮。";
            vDialog2.ConfirmFun = sure;
            vDialog2.show();
        });

        $("#btn3").click(function () {
            vDialog3.show();
        });

        $("#btn4").click(function () {
            vDialog4.show();
        });
    });

    var vDialog = new Dialog();
    vDialog.ID = "msg1";
    vDialog.Title = "消息对话框";
    vDialog.Type = "message";
    vDialog.initDialog();

    var vDialog2 = new Dialog();
    vDialog2.ID = "msg2";
    vDialog2.Title = "确认对话框";
    vDialog2.Type = "confirm";
    vDialog2.initDialog();

    function sure(obj) {
        alert("执行计划的操作。");
    }

    var vDialog3 = new Dialog();
    vDialog3.ID = "dlg1";
    vDialog3.Title = "XXXXXX对话框";
    vDialog3.Type = "dialog";
    vDialog3.Width = "600px";
    vDialog3.Height = "400px";
    vDialog3.Draggable = true;
    vDialog3.ContentAlign = "left";
    vDialog3.ContentValign = "top";
    vDialog3.ContentObj = $("#dForm");
    vDialog3.initDialog();

    var vDialog4 = new Dialog();
    vDialog4.ID = "dlg2";
    vDialog4.Title = "Window";
    vDialog4.Type = "window";
    vDialog4.Width = "800px";
    vDialog4.Height = "600px";
    vDialog4.Draggable = true;
    vDialog4.ShowClose = true; //是否显示关闭按钮
    vDialog4.ShowMinBtn = true; //是否显示最小化按钮
    vDialog4.ShowMaxBtn = true; //是否显示最大化按钮
    vDialog4.Url = "index"
    vDialog4.initDialog();
</script>
